<template>
    <div class="LinkRank">
        <div id="LinkRank"></div>
    </div>
</template>

<script>
    import Highcharts from 'highcharts/highstock';
    import $ from 'jquery';
    window.jQuery = $;
    window.$ = $;

    export default {
        name: "",
      data(){
        return{
          linkTop: {},
          id:[],
          num:[],
          id1:[]
        }
      },
        mounted() {
            this.moreChart();
            // this.initTop();
        },
        methods: {
          // initTop() {
          //   this.getRequest('/link/top').then(resp => {
          //     if (resp) {
          //       this.linkTop = resp;
          //       // for (var i=0;i<this.linkTop.length;i++){ //提取所需值组成新数组
          //       //   this.id.push([this.linkTop[i].id,this.linkTop[i].num]);
          //       //   this.num.push(this.linkTop[i].num);
          //       //   this.id1.push(this.linkTop[i].id);
          //       // }
          //     }
          //   })
          // },
            moreChart() {
                if (this.chart) {
                    this.chart.destroy();
                }

                  //JSON.stringify(this.id1).replace(/"/g,"'");
              // categories.push('三级医院');
              // categories.push('二级医院');
              // categories.push('专科医院');
              this.getRequest('/link/top').then(resp => {

                this.linkTop = resp;
                for (var i=0;i<this.linkTop.length;i++){ //提取所需值组成新数组
                  this.id.push([this.linkTop[i].id,this.linkTop[i].num]);
                  this.num.push(this.linkTop[i].num);
                  this.id1.push(this.linkTop[i].id);
                }
              var chart = Highcharts.chart('LinkRank',{ // eslint-disable-line no-unused-vars

                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '短链接访问量排名矩形图'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories:this.id1,
                            // [
                            //   'num1','num2','num3','num4','num5','num6','num7','num8','num9','num10'
                            // ],
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '访问次数'
                        }
                    },
                    tooltip: {
                        // head + 每个 point + footer 拼接成完整的 table
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:f} 次</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            borderWidth: 0
                        }
                    },
                    series: [{

                        name: '短链接',
                        data: this.num
                        //[49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
                    }],
                  credits: {
                      enabled: false     //不显示LOGO
                  }
                });
              })
            }

        }
    }


</script>

<style scoped>
    .LinkRank{
        width: 50%;
        height: 100%;
        display:inline-block;
        float: left;
    }
</style>